<script setup>
  const props = defineProps(['chatList'])

  // 找医生/极速问诊-患病时间1一周内2一月内3半年内4半年以上
  const illnessTime = { 1: '一周内', 2: '一月内', 3: '半年内', 4: '半年以上' }
  // 找医生 / 极速问诊 - 是否就诊过0未就诊1就诊过
  const consultFlag = { 1: '就诊过', 0: '未就诊' }

  // 点击立即查看预览图片
  function onShowPreViewImagefn() {
    const urls = props.chatList.msg.consultRecord.pictures.map(
      (item) => item.url
    )
    uni.previewImage({
      urls,
    })
  }
</script>
<template>
  <!-- 患者信息（21） -->
  <view class="patient-info">
    <view class="header">
      <view class="title">
        {{ props.chatList.msg.consultRecord.patientInfo.name }}
        {{ props.chatList.msg.consultRecord.patientInfo.genderValue }}
        {{ props.chatList.msg.consultRecord.patientInfo.age }}岁</view
      >
      <view class="note"
        >{{
          illnessTime[props.chatList.msg.consultRecord.patientInfo.illnessTime]
        }}
        |
        {{
          consultFlag[props.chatList.msg.consultRecord.patientInfo.consultFlag]
        }}
      </view>
    </view>
    <view class="content">
      <view class="list-item">
        <text class="label">病情描述</text>
        <text class="note">{{
          props.chatList.msg.consultRecord.illnessDesc
        }}</text>
      </view>
      <view class="list-item">
        <text class="label">图片</text>
        <text
          class="note"
          v-if="props.chatList.msg.consultRecord.pictures.length > 0"
          @click="onShowPreViewImagefn"
        >
          点击图片
        </text>
        <text v-else class="note">暂无图片</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  .patient-info {
    padding: 30rpx;
    margin-top: 60rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    background-color: #fff;

    .header {
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #ededed;

      .title {
        font-size: 32rpx;
        color: #121826;
        margin-bottom: 10rpx;
      }

      .note {
        font-size: 26rpx;
        color: #848484;
      }
    }

    .content {
      margin-top: 20rpx;
      font-size: 26rpx;

      .list-item {
        display: flex;
        margin-top: 10rpx;
      }

      .label {
        width: 130rpx;
        color: #3c3e42;
      }

      .note {
        flex: 1;
        line-height: 1.4;
        color: #848484;
      }
    }
  }
</style>
